<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="//s1.music.126.net/style/favicon.ico?v20180823">
    <title>仿网易云音乐</title>
    <!-- <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/article.css">
    <link rel="stylesheet" href="css/eye.css">
    <link rel="stylesheet" href="css/getSong.css">
    <link rel="stylesheet" href="css/search.css">
    <!-- swiper -->
    <link rel="stylesheet" href="node_modules/swiper/swiper-bundle.css">
    <!-- 音乐播放器 -->
    <link href="css/player.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            margin-top: -30px;
        }
    </style>
</head>

<body>
    <!-- toast弹窗头 -->
    <div class="toast_success">
        <span class="glyphicon glyphicon-ok-sign"></span>
        <p>操作成功！</p>
    </div>
    <div class="toast_error">
        <div class="glyphicon glyphicon-remove-sign"></div>
        <p>操作失败！</p>
    </div>
    <!-- toast弹窗尾 -->
    <!-- 音乐播放器头 -->
    <div id="jp_container_N" class="jp-video jp-video-270p jp-state-playing" role="application"
        aria-label="media player">
        <div class="jp-type-playlist">

            <div id="jquery_jplayer_N" class="jp-jplayer"></div>
            <div class="jp-gui">

                <div class="jp-music-title">歌名</div>
                <div class="jp-video-play" style="display: none;">
                    <button class="jp-video-play-icon" role="button" tabindex="0">播放</button>
                </div>
                <div class="jp-interface">
                    <div class="jp-progress">
                        <div class="jp-seek-bar" style="width: 100%;">
                            <div class="jp-play-bar" style="overflow: hidden; width: 97.5219%;"></div>
                        </div>
                    </div>
                    <div class="jp-current-time" role="timer" aria-label="time">04:11</div>
                    <div class="jp-duration" role="timer" aria-label="duration">04:17</div>
                    <div class="jp-controls-holder">
                        <div class="jp-controls">
                            <button class="jp-previous" role="button" tabindex="0">上一曲</button>
                            <button class="jp-play" role="button" tabindex="0">播放</button>
                            <button class="jp-next" role="button" tabindex="0">下一曲</button>
                            <button class="jp-stop" role="button" tabindex="0">暂停</button>
                        </div>
                        <div class="jp-volume-controls">
                            <button class="jp-mute" role="button" tabindex="0">静音</button>
                            <button class="jp-volume-max" role="button" tabindex="0">最大音量</button>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value" style="width: 10%;"></div>
                            </div>
                        </div>
                        <div class="jp-toggles">
                            <button class="jp-repeat" role="button" tabindex="0">重复</button>
                            <button class="jp-shuffle" role="button" tabindex="0">随机</button>
                        </div>
                    </div>
                    <div class="jp-details" style="display: none;">
                        <div class="jp-title" aria-label="title">music</div>
                    </div>
                </div>
            </div>
            <div class="jp-playlist">
                <div class="jp-playlist-box">
                    <ul>
                    </ul>
                </div>
            </div>
            <div class="jp-no-solution" style="display: none;">
                <span style="transform: rotate(180deg);">升级需要</span>您浏览器赞不支持播放，请更新版本
                <a href="http://get.adobe.com/flashplayer" target="_blank">Flash插件</a>.
            </div>
        </div>
        <div class="scrollBar" style="display: none;">
            <div class="bar"></div>
        </div>
        <button type="button" class="folded_bt" title="点击收缩" id="btnfold">
            <span style="transform: rotate(180deg);"></span>
        </button>

        <div id="listClose"></div>
    </div>
    <!-- 音乐播放器尾 -->
    <div id="app">
        <div class="login_Window" v-show="isShow">
            <div class="phone" v-if="toggle">
                <div class="header">
                    <p>手机号登录</p>
                    <a href="javascript:;" @click="isShow = !isShow"><span
                            class="glyphicon glyphicon-remove"></span></a>
                </div>
                <form class="form-horizontal" role="form" id="phoneForm">
                    <div class="form-group">
                        <label for="cellPhone" class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-10">
                            <input type="text" value="15071495828" class="form-control" id="cellPhone" required
                                placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phonePassword" class="col-sm-2 control-label" required>密码</label>
                        <div class="col-sm-10 pr">
                            <input type="password" value="yaochao099" class="form-control" id="phonePassword"
                                placeholder="请输入密码">
                            <span class="glyphicon glyphicon-eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10 flex space-between">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" checked required>请同意此协议
                                </label>
                            </div>
                            <a href="javascript:;">忘记密码</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-8">
                            <button type="submit" @click="isShow = !isShow"
                                class="btn btn-primary btn-block">登录</button>
                        </div>
                    </div>
                </form>
                <div class="footer">
                    <a href="javascript:;" @click="toggle = !toggle">&lt; 邮箱登录</a>
                    <a href="javascript:;" class="register">没有账号？免费注册 &gt;</a>
                </div>
            </div>
            <div class="email" v-else>
                <div class="header">
                    <p>邮箱登录</p>
                    <a href="javascript:;" @click="isShow = !isShow"><span
                            class="glyphicon glyphicon-remove"></span></a>
                </div>
                <form class="form-horizontal" role="form" id="emailForm">
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" value="yaochao125125@163.com" class="form-control" id="email"
                                placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group pr">
                        <label for="emailPassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" value="yaochao099" class="form-control" id="emailPassword"
                                placeholder="请输入密码">
                            <span class="glyphicon glyphicon-eye-close eye-close"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10 flex space-between">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" checked>请同意此协议
                                </label>
                            </div>
                            <a href="javascript:;">忘记密码</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-8">
                            <button type="submit" class="btn btn-primary btn-block">登录</button>
                        </div>
                    </div>
                </form>
                <div class="footer">
                    <a href="javascript:;" @click="toggle = !toggle">&lt; 手机号登录</a>
                    <a href="javascript:;" class="register">没有账号？免费注册 &gt;</a>
                </div>
            </div>
        </div>
        <header>
            <div class="container head">
                <h1><a href="javascript:;">网易云音乐</a></h1>
                <ul>
                    <li class="active"><a href="javascript:;">发现音乐</a></li>
                    <li><a href="javascript:;">我的音乐</a></li>
                    <li><a href="javascript:;">朋友</a></li>
                    <li><a href="javascript:;">商城</a></li>
                    <li><a href="javascript:;">音乐人</a></li>
                    <li><a href="javascript:;">下载客户端</a><sup class="hot">&nbsp;</sup></li>
                </ul>
                <div class="search">
                    <input type="text" placeholder="音乐/视频/电台/用户">
                </div>
                <div class="b">
                    <button>创作者中心</button>
                </div>

                <div class="login" v-if="headImg">
                    <a href="javascript:;" @click="isShow = !isShow">登录</a>
                </div>
                <div class="login toggle" v-else>
                    <img :src="imgSrc" class="img-circle" alt="Image" id="userImg" width="30">
                    <ul class="information">
                        <li>欢迎你！</li>
                        <li><a href="mine.html">{{nickname}}</a></li>
                        <li>
                            <a href="javascript:;" @click="removeToken">
                                <span class="glyphicon glyphicon-off"></span>
                                退出
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </header>
        <div class="container">
            <div class="row">
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 right-line left-warp">
                    <ul>
                        <li class="active"><a href="javascript:;">发现音乐</a></li>
                        <li><a href="javascript:;">朋友</a></li>
                        <li><a href="javascript:;">直播</a></li>
                        <li><a href="javascript:;">私人FM</a></li>
                        <li class="title"><a href="javascript:;">我的音乐</a></li>
                        <li><span class="glyphicon glyphicon-music"></span><a href="javascript:;">本地音乐</a></li>
                        <li><span class="glyphicon glyphicon-download"></span><a href="javascript:;">下载管理</a></li>
                        <li class="title"><a href="javascript:;" class="create">创建的歌单</a></li>
                        <li><span class="glyphicon glyphicon-heart-empty"></span><a href="javascript:;">我喜欢的音乐</a></li>
                    </ul>
                </div>
                <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 right-warp">
                    <ul>
                        <li class="active"><a href="javascript:;">个性推荐</a></li>
                        <li><a href="javascript:;">搜索音乐</a></li>
                        <li><a href="javascript:;" id="gd">歌单</a></li>
                        <li><a href="javascript:;">主播电台</a></li>
                        <li><a href="javascript:;">排行榜</a></li>
                        <li><a href="javascript:;">歌手</a></li>
                        <li><a href="javascript:;">主播音乐</a></li>
                    </ul>
                    <div class="item" style="display: block;">
                        <!-- Swiper -->
                        <div class="swiper-container">
                            <div class="swiper-wrapper">

                            </div>
                            <!-- Add Arrows -->
                            <div class="arrows" style="display: none;">
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>

                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                        <div class="row">
                            <div class=" col-xs-10 col-sm-8 col-md-8 col-lg-8 tjgd">
                                <div class="page-header">
                                    <h3>推荐歌单 <span class="glyphicon glyphicon-chevron-right"></span></h3>
                                    <ul class="list-group">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 搜索模块 -->
                    <div class="item">
                        <iframe src="search.html" frameborder="0" width="100%" height="800px" scrolling="auto"></iframe>
                    </div>
                    <!-- 歌单模块 -->
                    <div class="item">
                        <div class="container-fluid" id="song">
                            <!-- <h1 >Hello World</h1> -->
                            <div class="row header">
                                <div class="left">
                                    <img src="https://p1.music.126.net/SA6bW1UlPP04rFB2pj-FvQ==/109951165813403264.jpg"
                                        alt="" width="185" class="img-container">
                                </div>

                                <div class="right">
                                    <div class="title">
                                        <a href="javascript:;" class="drf">歌单</a>
                                        <p id="name">生活虽苦，也要边热爱边制造快乐</p>
                                    </div>
                                    <div class="message">
                                        <img src="https://p1.music.126.net/SA6bW1UlPP04rFB2pj-FvQ==/109951165813403264.jpg"
                                            alt="" class="img-circle" height="24">
                                        <a href="javascript:;">YouTube全球音乐</a>
                                        <time>2021-01-16 创建</time>
                                    </div>
                                    <div class="btns">
                                        <a href="javascript:;" class="redA" style="background-color: #EC4141;">
                                            <span class="glyphicon glyphicon-play fc-white"></span>
                                            播放全部
                                            <span class="glyphicon glyphicon-plus fc-white"></span>
                                        </a>
                                        <a href="javascript:;" class="gray">
                                            <span class="glyphicon glyphicon-inbox"></span>
                                            收藏
                                            <span id="subscribedCount">1585</span>
                                        </a>
                                        <a href="javascript:;" class="gray">
                                            <span class="glyphicon glyphicon-share"></span>
                                            分享
                                            <span id="trackCount">（72）</span>
                                        </a>
                                        <a href="javascript:;" class="gray">
                                            <span class="glyphicon glyphicon-download-alt"></span>
                                            下载全部

                                        </a>
                                    </div>
                                    <div class="tags">
                                        标签：<a href="javascript:;">华语</a> <a href="javascript:;">流行</a> <a
                                            href="javascript:;">伤感</a>
                                    </div>
                                    <div class="bil">
                                        <span>歌曲：<i>40</i></span>播放：<span id="playCount">161万</span>
                                    </div>
                                    <div class="brief ">
                                        简介：<span id="description">我有一千种想见你的理由…</span>
                                    </div>
                                </div>

                            </div>
                            <div class="row body slideTxtBox">
                                <div class="flex space-between hd">
                                    <ul>
                                        <li class="on"><a href="javascript:;">歌曲列表</a></li>
                                        <li><a href="javascript:;">评论<i id="PinLunNum">（29）</i></a></li>
                                        <li><a href="javascript:;">收藏者</a></li>
                                    </ul>
                                    <input type="text">
                                </div>
                                <div class="bd">
                                    <div class="songList">
                                        <table class="table table-striped table-hover">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>音乐标题</th>
                                                    <th>歌手</th>
                                                    <th>专辑</th>
                                                    <th> </th>
                                                    <th>发布时间</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="comment">
                                        <textarea name="" id="gedanComment" class="form-control" rows="3"
                                            required="required"></textarea>
                                        <button type="button" id="gedanSend"
                                            class="btn btn-default pull-right">评论</button>
                                        <!-- 歌单评论 -->

                                        <div class="row" id="jcpl">
                                            <div class="jcpl col-sm-12">
                                                <!-- <h4>精彩评论</h4> -->
                                                <!-- <div class="flex space-between flex-end">
                                                    <div class="left">
                                                        <img src="https://p4.music.126.net/WsGXuPcB7OS7xg18wFk9fw==/109951164487286209.jpg" class="img-circle" alt="Image">
                                                        <div>
                                                            <p><a href="javascript:;" class="nickname">程同却人：</a><span class="content">四太在国由，评俭陀的可人动，人家好，的句书要倒病法国修身皇。</span></p>
                                                           <p class="time">2020-1-10</p>
                                                        </div>
    
                                                    </div>
                                                    <div class="right">
                                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                                        | <span class="glyphicon glyphicon-share"></span> |
                                                        <span class="glyphicon glyphicon-pencil"></span>
                                                    </div>
                                                </div> -->
                                            </div>
                                        </div>
                                        <div class="row" id="zxpl">
                                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 jcpl">
                                                <!-- <h4>最新评论</h4>
                                                <div class="flex space-between flex-end">
                                                    <div class="left">
                                                        <img src="https://p4.music.126.net/WsGXuPcB7OS7xg18wFk9fw==/109951164487286209.jpg" class="img-circle" alt="Image">
                                                        <div>
                                                            <p><a href="javascript:;" class="nickname">程同却人：</a><span class="content">四太在国由，评俭陀的可人动，人家好，的句书要倒病法国修身皇。</span></p>
                                                           <p class="time">2020-1-10</p>
                                                        </div>
    
                                                    </div>
                                                    <div class="right">
                                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                                        | <span class="glyphicon glyphicon-share"></span> |
                                                        <span class="glyphicon glyphicon-pencil"></span>
                                                    </div>
                                                </div> -->
                                            </div>

                                        </div>
                                    </div>
                                    <!-- 收藏者信息 -->
                                    <div class="collector">
                                        <ul id="">
                                            <!-- <li>
                                                <img class="img-circle" src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li>
                                            <li>
                                                <img src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li>
                                            <li>
                                                <img src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li>
                                            <li>
                                                <img src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li>
                                            <li>
                                                <img src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li>
                                            <li>
                                                <img src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li>
                                            <li>
                                                <img src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li>
                                            <li>
                                                <img src="http://p1.music.126.net/ma8NC_MpYqC-dK_L81FWXQ==/109951163250233892.jpg" alt="" width="90">
                                                <p class="nickname">书服尘他 <img src="img/boy.jpg" alt=""></p>
                                            </li> -->
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">主播电台</div>
                    <div class="item">排行榜</div>
                    <div class="item">歌手</div>
                    <div class="item">主播音乐</div>
                </div>
                <audio src="" autoplay></audio>
            </div>
        </div>
    </div>

    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/swiper/swiper-bundle.js"></script>
    <script src="js/tools.js"></script>

    <!-- 选项卡插件 js -->
    <script src="js/SuperSlide2.1-demo-00/jquery.SuperSlide.2.1.3.js"></script>
    <script type="text/javascript">
        $(() => {
            jQuery(".slideTxtBox").slide({
                trigger: 'click',
            });
        });
    </script>
    <script src="js/api.js"></script>
    <!-- 创建vue实例 -->
    <script>
        let profile = localStorage.getItem('profile');
        // console.log(JSON.parse(profile));
        const login = new Vue({
            el: '#app',
            data: {
                isShow: false,
                toggle: true,

                headImg: true,
                imgSrc: JSON.parse(profile).avatarUrl,
                nickname: JSON.parse(profile).nickname,
                // imgUrl:1


            },
            methods: {
                showImg() {
                    if (localStorage.getItem('token')) {
                        this.headImg = false
                    } else {
                        this.headImg = true
                    }
                },
                removeToken() {
                    localStorage.removeItem('token');
                    this.headImg = true;
                },
                playMuisc() {
                    alert(11)
                }
            },
            created() {
                this.showImg()

            },

        })
    </script>
    <script src="js/getSong.js"></script>

    <!-- 请求接口 -->
    <script>
        // 手机号登录功
        $('#phoneForm').on('submit', function (e) {
            const data = new FormData();
            e.preventDefault();
            let phone = $('#cellPhone').val();
            let password = $('#phonePassword').val();

            data.append('phone', Number(phone));
            data.append('password', password)
            personal.phone(data).then((result) => {
                console.log(11111111111111111);
                console.log(result.data);
                let { msg, code, profile, token } = result.data;
                // console.log(profile.userId);

                if (code !== 200) {
                    getEl.toast_error(msg);

                } else if (code === 200) {
                    localStorage.setItem('token', token);
                    localStorage.setItem('profile', JSON.stringify(profile));
                    location.reload();
                }
                return Promise.resolve(result)
            })
        });
        // 邮箱登录
        $('#emailForm').on('submit', function (e) {
            const data = new FormData();
            e.preventDefault();
            let email = $('#email').val();
            let password = $('#emailPassword').val();
            alert(111)
            data.append('email', Number(email));
            data.append('password', password)
            personal.phone(data).then((result) => {
                console.log(result.data);
                let { msg, code } = result.data;
                if (code !== 200) {
                    getEl.toast_error(msg);
                }
            }).catch((err) => {

            });
        });

        // 推荐新音乐
        axios({
            url: '/personalized/newsong',
            params: { limit: 10 }
        }).then(res => {
            console.log('推荐新音乐');
            console.log(res.data.result);
        });
        // 获取音乐 url
        axios({
            url: '/song/url',
            params: { id: 1821466007 }
        }).then(res => {
            console.log('获取音乐 url');
            console.log(res.data.data);
        });
        // 音乐是否可用
        axios({
            url: '/check/music',
            params: { id: 33894312 }
        }).then(res => {
            console.log('音乐是否可用');
            console.log(res.data);
        }).catch(err => {
            console.error('歌曲不存在');
        });
        // 搜索
        axios({
            url: '/cloudsearch',
            params: { keywords: '游山恋' }
        }).then(res => {
            console.log('搜索');
            console.log(res.data.result);
        });
    </script>

    <!-- 小功能实现 -->
    <script src="js/SmallFunction.js"></script>

    <!-- 播放器初始化 -->
    <!-- <script>
        var musicList = [
            {
                title: "海伦",
                artist: "桥边姑娘",
                mp3: "https://mp32.9ku.com/upload/128/2019/12/18/1000452.mp3 ",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20191218/67d6edbe31b163b6.jpg"
            },
            {
                title: "王忻辰",
                artist: "清空",
                mp3: "https://mp32.9ku.com/upload/128/2021/01/26/1015576.mp3",
                poster: "https://imgessl.kugou.com/stdmusic/20210125/20210125185206971271.jpg"
            }, {
                title: "赵雷",
                artist: "成都",
                mp3: "https://mp32.9ku.com/upload/128/2016/11/07/855488.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20161107/c45e24dba7f2a9d8.jpg"
            },
            {
                title: "王琪",
                artist: "可可托海的牧羊人",
                mp3: "https://mp32.9ku.com/upload/128/2020/05/22/1004523.mp3",
                poster: "https://bkimg.cdn.bcebos.com/pic/72f082025aafa40f4bfb30fea62d144f78f0f736b3f5?x-bce-process.jpg"
            },
            {
                title: "朴树",
                artist: "平凡之路",
                mp3: "https://mp3.9ku.com/hot/2014/07-16/642431.mp3",
                poster: "http://img.9ku.com/pic/zjpic/15/141384.jpg"
            },
            {
                title: "凤凰传奇",
                artist: "自由飞翔",
                mp3: "https://mp3.9ku.com/hot/2007/05-07/84566.mp3",
                poster: "http://img.9ku.com/pic/zjpic/4/34746.jpg"
            },
            {
                title: "李玉刚",
                artist: "刚好遇见你",
                mp3: "https://mp32.9ku.com/upload/128/2016/11/14/855634.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20161114/1b33a084d1ad0af6.jpg"
            },
            {
                title: "凤凰传奇",
                artist: "荷塘月色",
                mp3: "https://mp3.9ku.com/hot/2010/06-19/361140.mp3",
                poster: "http://img.9ku.com/pic/zjpic/1/614.jpg"
            },
            {
                title: "凤凰传奇",
                artist: "最炫民族风",
                mp3: "https://mp3.9ku.com/hot/2009/05-31/183203.mp3",
                poster: "http://img.9ku.com/pic/zjpic/2/19748.jpg"
            },
            {
                title: "陈慧娴",
                artist: "千千厥歌",
                mp3: "https://mp3.9ku.com/hot/2004/07-17/42620.mp3",
                poster: "https://www.9ku.com/zjmusic/35104.htm"
            },
            {
                title: "周杰伦",
                artist: "青花瓷",
                mp3: "https://mp3.9ku.com/hot/2007/11-01/91161.mp3",
                poster: "http://img.9ku.com/pic/zjpic/4/32111.jpg"
            },
            {
                title: "大籽",
                artist: "白月光与朱砂痣",
                mp3: "https://mp32.9ku.com/upload/128/2021/01/04/1014430.mp3",
                poster: "https://bkimg.cdn.bcebos.com/pic/1c950a7b02087bf40ad1c5529198402c11dfa9ec617e"
            },
            {
                title: "毛不易",
                artist: "像我这样的人",
                mp3: "https://mp32.9ku.com/upload/128/2017/08/08/864424.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-08/1612775421.jpg"
            },
            {
                title: "周杰伦",
                artist: "东风破",
                mp3: "https://mp32.9ku.com/upload/128/2017/08/08/864424.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-08/1612762206.jpg"
            },
            {
                title: "阿冗",
                artist: "你的答案",
                mp3: "https://mp32.9ku.com/upload/128/2019/11/08/998378.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/03-15/1615806341.jpg"
            },
            {
                title: "买辣椒也用券",
                artist: "起风了",
                mp3: "https://mp32.9ku.com/upload/128/2018/02/09/875689.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20180209/0ec7990fdda432d9.png"
            },
            {
                title: "Beyond",
                artist: "光辉岁月",
                mp3: "https://mp3.9ku.com/new/2004/07-13/30001.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-06/1612555627.jpg"
            },
            {
                title: "Beyond",
                artist: "海阔天空",
                mp3: "https://mp3.9ku.com/new/2004/07-13/30001.mp3",
                poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-11/1612984805.jpg"
            },
        ];
    </script> -->
    <script>
        //音乐播放器对象
        console.log("------------------拿本地存储数据---------------------");
        let obj1 = JSON.parse(sessionStorage.getItem('music1')) || null;
        let obj2 = JSON.parse(sessionStorage.getItem('music2')) || null;
        let obj3 = JSON.parse(sessionStorage.getItem('music3')) || null;
        let obj4 = JSON.parse(sessionStorage.getItem('music4')) || null;
        let obj5 = JSON.parse(sessionStorage.getItem('music5')) || null;
        let obj6 = JSON.parse(sessionStorage.getItem('music6')) || null;
        let obj7 = JSON.parse(sessionStorage.getItem('music7')) || null;
        let obj8 = JSON.parse(sessionStorage.getItem('music8')) || null;
        let obj9 = JSON.parse(sessionStorage.getItem('music9')) || null;
        let obj10 = JSON.parse(sessionStorage.getItem('music10')) || null;

        for (let i = 1; i <= 10; i++) {
        }
        const musicList = [
            {
                title: obj1.title,
                artist: obj1.artList,
                mp3: obj1.mp3,
                poster: obj1.poster,
            },
            {
                title: obj2.title,
                artist: obj2.artList,
                mp3: obj2.mp3,
                poster: obj2.poster,
            },
            {
                title: obj3.title,
                artist: obj3.artList,
                mp3: obj3.mp3,
                poster: obj3.poster,
            },
            // {
            //     title: obj4.title,
            //     artist: obj4.artList,
            //     mp3: obj4.mp3,
            //     poster: obj4.poster,
            // },
            // {
            //     title: obj5.title,
            //     artist: obj5.artList,
            //     mp3: obj5.mp3,
            //     poster: obj5.poster,
            // },
            // {
            //     title: obj6.title,
            //     artist: obj6.artList,
            //     mp3: obj6.mp3,
            //     poster: obj6.poster,
            // },
            // {
            //     title: obj7.title,
            //     artist: obj7.artList,
            //     mp3: obj7.mp3,
            //     poster: obj7.poster,
            // },
            // {
            //     title: obj8.title,
            //     artist: obj8.artList,
            //     mp3: obj8.mp3,
            //     poster: obj8.poster,
            // },
            // {
            //     title: obj9.title,
            //     artist: obj9.artList,
            //     mp3: obj9.mp3,
            //     poster: obj9.poster,
            // },
            // {
            //     title: obj10.title,
            //     artist: obj10.artList,
            //     mp3: obj10.mp3,
            //     poster: obj10.poster,
            // }
        ];

    //     var musicList = [{
    //         title: "海伦",
    //         artist: "桥边姑娘",
    //         mp3: "https://mp32.9ku.com/upload/128/2019/12/18/1000452.mp3 ",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20191218/67d6edbe31b163b6.jpg"
    //     },
    //     {
    //         title: "王忻辰",
    //         artist: "清空",
    //         mp3: "https://mp32.9ku.com/upload/128/2021/01/26/1015576.mp3",
    //         poster: "https://imgessl.kugou.com/stdmusic/20210125/20210125185206971271.jpg"
    //     }, {
    //         title: "赵雷",
    //         artist: "成都",
    //         mp3: "https://mp32.9ku.com/upload/128/2016/11/07/855488.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20161107/c45e24dba7f2a9d8.jpg"
    //     },
    //     {
    //         title: "王琪",
    //         artist: "可可托海的牧羊人",
    //         mp3: "https://mp32.9ku.com/upload/128/2020/05/22/1004523.mp3",
    //         poster: "https://bkimg.cdn.bcebos.com/pic/72f082025aafa40f4bfb30fea62d144f78f0f736b3f5?x-bce-process.jpg"
    //     },
    //     {
    //         title: "朴树",
    //         artist: "平凡之路",
    //         mp3: "https://mp3.9ku.com/hot/2014/07-16/642431.mp3",
    //         poster: "http://img.9ku.com/pic/zjpic/15/141384.jpg"
    //     },
    //     {
    //         title: "凤凰传奇",
    //         artist: "自由飞翔",
    //         mp3: "https://mp3.9ku.com/hot/2007/05-07/84566.mp3",
    //         poster: "http://img.9ku.com/pic/zjpic/4/34746.jpg"
    //     },
    //     {
    //         title: "李玉刚",
    //         artist: "刚好遇见你",
    //         mp3: "https://mp32.9ku.com/upload/128/2016/11/14/855634.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20161114/1b33a084d1ad0af6.jpg"
    //     },
    //     {
    //         title: "凤凰传奇",
    //         artist: "荷塘月色",
    //         mp3: "https://mp3.9ku.com/hot/2010/06-19/361140.mp3",
    //         poster: "http://img.9ku.com/pic/zjpic/1/614.jpg"
    //     },
    //     {
    //         title: "凤凰传奇",
    //         artist: "最炫民族风",
    //         mp3: "https://mp3.9ku.com/hot/2009/05-31/183203.mp3",
    //         poster: "http://img.9ku.com/pic/zjpic/2/19748.jpg"
    //     },
    //     {
    //         title: "陈慧娴",
    //         artist: "千千厥歌",
    //         mp3: "https://mp3.9ku.com/hot/2004/07-17/42620.mp3",
    //         poster: "https://www.9ku.com/zjmusic/35104.htm"
    //     },
    //     {
    //         title: "周杰伦",
    //         artist: "青花瓷",
    //         mp3: "https://mp3.9ku.com/hot/2007/11-01/91161.mp3",
    //         poster: "http://img.9ku.com/pic/zjpic/4/32111.jpg"
    //     },
    //     {
    //         title: "大籽",
    //         artist: "白月光与朱砂痣",
    //         mp3: "https://mp32.9ku.com/upload/128/2021/01/04/1014430.mp3",
    //         poster: "https://bkimg.cdn.bcebos.com/pic/1c950a7b02087bf40ad1c5529198402c11dfa9ec617e"
    //     },
    //     {
    //         title: "毛不易",
    //         artist: "像我这样的人",
    //         mp3: "https://mp32.9ku.com/upload/128/2017/08/08/864424.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-08/1612775421.jpg"
    //     },
    //     {
    //         title: "周杰伦",
    //         artist: "东风破",
    //         mp3: "https://mp32.9ku.com/upload/128/2017/08/08/864424.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-08/1612762206.jpg"
    //     },
    //     {
    //         title: "阿冗",
    //         artist: "你的答案",
    //         mp3: "https://mp32.9ku.com/upload/128/2019/11/08/998378.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/03-15/1615806341.jpg"
    //     },
    //     {
    //         title: "买辣椒也用券",
    //         artist: "起风了",
    //         mp3: "https://mp32.9ku.com/upload/128/2018/02/09/875689.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20180209/0ec7990fdda432d9.png"
    //     },
    //     {
    //         title: "Beyond",
    //         artist: "光辉岁月",
    //         mp3: "https://mp3.9ku.com/new/2004/07-13/30001.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-06/1612555627.jpg"
    //     },
    //     {
    //         title: "Beyond",
    //         artist: "海阔天空",
    //         mp3: "https://mp3.9ku.com/new/2004/07-13/30001.mp3",
    //         poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-11/1612984805.jpg"
    //     },
    // ];

    </script>
    <!-- 音乐播放器 -->
    <script src="js/player/player.js"></script>
    <script src="js/player/playlist.js"></script>
    <script src="js/player/player_database.js"></script>
    <script src="js/player/drag.js"></script>


</body>

</html>